<template>
  <div id="myamap-line-page" :style="{
    paddingTop:topSize+'px'
  }">
    <div class="page-title page-title-white">
      <div id="back-button" @click="$router.back()">
        <i href="javascript:void(0)" class="el-icon-arrow-left"></i>
      </div>
      <span>路线规划</span>
    </div>
    <div id="map-content" :style="{
      width:'100%',
      height: (getWinSize().height-40)+'px'
    }"></div>
    <div id="panel"></div>
  </div>
</template>

<style>
#myamap-line-page{}
#myamap-line-page>.page-title{ position: absolute; top:0px; width: 100%; font-size: 16px; background: #FFFFFF}
#panel {
  display: none;
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 40px;
  left: 0px;
  width: 180px;
}
#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
  name: 'MyAMap',
  mounted () {
    this.initMap()
  },
  data: function () {
    return {
      map:null,
      addressLoading:false,
      topSize: 40,
      keywords: '',
      location: [],
      provinceCityCounty: '',
      address: '',
      isSelecting: false,
      searchResult: false,
      searchResultStatus: 0,
    }
  },
  methods: {
    initParams:function () {
      this.location=this.CurrUser.Location.split(',')
    },

    // 初始化地图
    initMap () {
      let $this = this
      $this.initParams()
      AMapLoader.load({
        key: '7fed48e7e47264794b082c6cecb2a0ba',                                 // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0',                                                          // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.Autocomplete', 'AMap.PlaceSearch','AMap.Driving'],                       // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      }).then((AMap) => {
        $this.map = new AMap.Map('map-content', {  //设置地图容器id
          viewMode: '3D',    //是否为3D地图模式
          zoom: 11,           //初始化地图级别
          center: $this.location, //初始化地图中心点位置
        })

        // 获取输入提示信息
       /*  AMap.plugin('AMap.Driving', function() {
          var driving = new AMap.Driving({
            // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
            policy: AMap.DrivingPolicy.LEAST_TIME
          })

          var startLngLat = [108.905172,34.124914]
          var endLngLat = [108.934376,34.201023]

          driving.search(startLngLat, endLngLat, function (status, result) {
            // 未出错时，result即是对应的路线规划方案
          })
        }) */


        var driving = new AMap.Driving({
          map: $this.map,
          panel: "panel"
        });
        // var startLocation=$this.$route.query.startLocation.split(',')
        var startLocation=$this.location
        var endLocation=$this.$route.query.endLocation.split(',')

        // 根据起终点经纬度规划驾车导航路线
        driving.search(new AMap.LngLat(startLocation[0],startLocation[1]), new AMap.LngLat(endLocation[0],endLocation[1]), function(status, result) {
          // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          if (status === 'complete') {
            console.log('绘制驾车路线完成')
          } else {
            console.log('获取驾车数据失败：' + result)
          }
        });

      }).catch(e => {
        console.log(e)
      })
    }
  }
}
</script>

<style scoped>

</style>
